<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Message</title>
</head>
<body>
    <!--设置一个表格 宽度为500  单元格之间距离 cellspacing 默认为2px-->
    <table width = "500px" cellspacing = "0">
        <!-- thead标签: 表头部分区域信息(注意和th区分, 范围是比th要大)-->
        <thead>
            <h3>请填写简历信息</h3>
        </thead>
        <!--tbody标签:表格得主体区域-->

        <tbody>
            <!-- table 包含 tr, tr包含td或者th-->
            <tr>
                <!-- tr标签 表格得一行-->
                <!-- td标签 表示一个单元格-->
                <td>
                    
                    <!--- laber 搭配input标签使用， 点击label也能选中对应
                    单元得单选/复选框-->
                    <label for="name">姓名</label>
                </td>

                <td>
                    <input type ="text" id = "name">
                </td>
            </tr>

            <tr>
                <td>
                    性别
                </td>
                <td>
                    <!-- 单选框之间必须具备相同得name属性 才能实现多选一得效果-->
                    <input type="radio" name = "sex" id ="male" checked="checked">
                    <!-- img 要放到label内部保证图标也能选中单选框-->
                    <!-- 还需要把width加上, 否则图片太大了-->
                    <label for="male"> <img src="男.png" alt="这是一个男生图标" width="10px"> </label>
                    <input type="radio" name="sex" id="female" >

                    <label for="female" > <img src="女.png" width="10px" alt=""这是一个女生图标> </label>

                </td>
            </tr>

            <tr>
                <td>
                    出生日期
                </td>
                <td>
                    <select>
                        <!-- select标签为下拉菜单-->
                        <!-- option中定义selected表示默认选中-->
                        <option>请选择年份</option>
                        
                        <option >1998</option>
                        <option >1999</option>
                        <option >2000</option>
                        <option >2001</option>
                        <option >2002</option>
                        <option >2003</option>
                        <option >2004</option>
                        <option >2005</option>
                        <option >2006</option>
                        <option >2007</option>
                        <option >2008</option>
                        <option >2009</option>
                        <option >2010</option>
                        <option >2011</option>
                        <option >2012</option>
                        <option >2013</option>
                        <option >2014</option>
                        <option >2015</option>
                        <option >2016</option>
                        <option >2017</option>
                        <option >2018</option>
                        <option >2019</option>
                        <option >2020</option>
                    </select>

                    <select>
                        <option>请选择月份</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                        <option>10</option>
                        <option>11</option>
                        <option>12</option>
                    </select>

                    <select>
                        <option>请选择日期</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                        <option>10</option>
                        <option>11</option>
                        <option>12</option>
                        <option>14</option>
                        <option>15</option>
                        <option>16</option>
                        <option>17</option>
                        <option>18</option>
                        <option>19</option>
                        <option>20</option>
                        <option>21</option>
                        <option>22</option>
                        <option>23</option>
                        <option>24</option>
                        <option>25</option>
                        <option>26</option>
                        <option>27</option>
                        <option>28</option>
                        <option>29</option>
                        <option>30</option>
                        <option>31</option>
                    </select>

                </td>
            </tr>

            <tr>
                <td>
                    就读学校
                    <td>
                        <!-- input 得文本框模式-->
                        <input type="text">
                    </td>
                </td>
            </tr>

            <tr>
                <td>
                    应聘岗位
                </td>
                <td>
                    <input type="checkbox" id="fore-end">
                    <label for="fore-end" > 前端开发</label>

                    <input type="checkbox" id="after-end">
                    <label for="after-end" > 后端开发</label>

                    <input type="checkbox" id="qa">
                    <label for="qa"> 测试开发</label>

                    <input type="checkbox" id="op">
                    <label for="op"> 运维开发</label>
                </td>
            </tr>

            <tr>
                <td>
                    掌握得技能
                </td>
                <td>
                    <textarea name="" id="" cols="30" rows="10"></textarea>
                </td>
            </tr>

            <tr>
                <td>
                    项目经历
                </td>
                <td>
                    <textarea name="" id="" cols="30" rows="10"></textarea>
                </td>
            </tr>

            <tr>
                <!--空出一个单元格与左边对齐到填写框下-->
                <td></td>
                <td>
                    <input type="checkbox" id="lisence">
                    <label for="lisence"> 我已仔细阅读通过本公司招聘要求</label>
                </td>
            </tr>

            <tr>
                <td></td>
                <!-- herf: "#" 表示空连接 使用#在herf中占位-->
                <td>
                    <a href="#">查看我的状态</a>
                </td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <h3>请应聘者确认以下信息:</h3>
                    <!-- ul 有序标签  ol无序标签-->
                    <ul>
                        <li>以上信息真是有效</li>
                        <li>能尽早进入公司实习</li>
                        <li>能接受加班</li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>

</body>
</html>